/**
 * Created with Vim7.3 Mac
 * @fileOverview : 
 * @author : Lyle lylechen2014@gmail.com
 * @since : 2016-08-01 16:55:03
 * @filename : src/common/menuList.js
 * @version : 
 * @description : 
 */

import React, { Component } from 'react';
import {
    StyleSheet,
    Text,
    View,
    Image,
    TouchableOpacity
} from 'react-native';

import Browse from '../components/browse';
import LetsMeet from '../components/letsMeet';
import Connections from '../components/connections';
import Setting from '../components/setting';

let navObj = [
          //{name : 'upgrade',title : 'Upgrade', img:require('../img/nav_upgrade.png'), onImg:require('../img/nav_upgrade_on.png')},
          //{name : 'activity',title : 'Activities',img:require('../img/nav_activity.png'), onImg:require('../img/nav_activity_on.png')},
          {name : 'letsmeet',title : 'Let\'s Meet',img:require('../img/nav_letsmeet.png'), onImg:require('../img/nav_letsmeet_on.png')},
          //{name : 'email',title : 'Emails / Winks',img:require('../img/nav_email.png'), onImg:require('../img/nav_email_on.png')},
          //{name : 'chat',title : 'Live Chat',img:require('../img/nav_chat.png'), onImg:require('../img/nav_chat_on.png')},
          {name : 'search',title : 'Search',img:require('../img/nav_search.png'), onImg:require('../img/nav_search_on.png')},
          {name : 'connections',title : 'Connections',img:require('../img/nav_connections.png'), onImg:require('../img/nav_connections_on.png')},
          //{name : 'blog',title : 'Blogs',img:require('../img/nav_blog.png'), onImg:require('../img/nav_blog_on.png')},
          {name : 'setting',title : 'Settings & Help',img:require('../img/nav_setting.png'), onImg:require('../img/nav_setting_on.png')},
    ];

class MenuList extends Component {

    constructor(props) {
        super(props);
        this.state = {
             menu : 'letsmeet'
        };
    }

    componentWillReceiveProps(nextProps) {
        this.setState({menu: nextProps.menu});
    }
   
    render() {
        let items = this.getItems(navObj);
        return (
                <View style={styles.userNavMenu} >
                    {items}
                </View>
        );
    }

    getItems(navObj) {
        var items = [];
        for (var i in navObj) {
            let menu = navObj[i];
            items[i] = (
                        <TouchableOpacity  key={i} onPress={()=>this[menu.name+'Goto']()}>
                            <View style={this.getMenuStyle(menu.name)}>
                                <Image style={styles.userNavMenuLiIco} source={this.getMenuImg(menu)} />
                                <Text style={this.getMenuText(menu.name)}>{navObj[i].title}</Text>
                            </View>
                        </TouchableOpacity>
                      );
        }
        return items;
    }

    getMenuText(menu) {
        let menuStyle = styles.userNavMenuLiActiTxt;
        if (menu == this.state.menu) {
            menuStyle = styles.userNavMenuLiActionTxt;
        } 
        return menuStyle;
    }

    getMenuImg(menu) {
        let url = menu.img;
        if (menu.name == this.state.menu) {
            url =  menu.onImg;
        } 
        return url;
    }

    getMenuStyle(menu) {
        let menuStyle = styles.userNavMenuLi;
        if (menu == this.state.menu) {
            menuStyle = styles.userNavMenuLiAction;
        } 
        return menuStyle;
    }

    searchGoto() {
        this.props.that.switchMenu();
        let navigator  = this.props.getNav();
        Utils.navJumpTo(navigator, {
                name: "Search",
                component: Browse,
                title: 'Browse',
                navBarType: 1,
                RightButton: 'filter',
        },'left');
    }

    letsmeetGoto() {
        this.props.that.switchMenu();
        let navigator  = this.props.getNav();
        Utils.navJumpTo(navigator, {
            name: 'LetsMeet',
            component: LetsMeet,
            title: 'Let\'s Meet',
            navBarType: 1,
            RightButton: 'heart',
        },'left')
    }

    connectionsGoto() {
        this.props.that.switchMenu();
        let navigator  = this.props.getNav();
        Utils.navJumpTo(navigator, {
            name: 'Connections',
            component: Connections,
            title: 'Connections',
            navBarType: 1,
        }, 'left')
    }

    settingGoto() {
        this.props.that.switchMenu();
        let navigator  = this.props.getNav();
        Utils.navJumpTo(navigator, {
            name: 'Setting',
            component: Setting,
            title: 'Settings & Help',
            navBarType: 1,
        }, 'left')
    }
}


const styles = StyleSheet.create(Css.MenuStyle);

export default MenuList;

